<template>
	<div class="app-container">
		<h1>搜索查询考试成绩</h1>
		<h3>(请点击搜索按钮进行查询)</h3>
		<div style="margin-top: 15px;">
			<el-input placeholder="请输入内容" v-model="listQuery.search_value" class="input-with-select">
				<el-select v-model="listQuery.select_value" slot="prepend" placeholder="请选择">
					<el-option label="全部" value="全部"></el-option>
					<el-option label="考试名称" value="exam.name"></el-option>
					<el-option label="试卷标题" value="exam.title"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="doSearch">搜索</el-button>
			</el-input>
		</div>
		<el-table
			@select="selectrowdata"
			@select-all="selectalldata"
			:data="tableData"
			align="center"
			header-align="center"
			style="width: 100%"
			v-loading="listLoading"
			border
			fit
			highlight-current-row
		>
			<el-table-column type="selection" width="55" prop="id"></el-table-column>
			<el-table-column sortable label="考试名称" prop="name">
				<template slot-scope="scope">
					<el-tag type="success">{{ scope.row.name }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="试卷标题" prop="title">
				<template slot-scope="scope">
					<el-tag type="info">{{ scope.row.title }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="开考日期" prop="stime">
				<template slot-scope="scope">
					<el-tag type="warning">{{ scope.row.stime }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="结束日期" prop="etime">
				<template slot-scope="scope">
					<el-tag type="danger">{{ scope.row.stime }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="viewPaper(scope.$index, scope.row)">查询所有试卷</el-button>
					<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">查看成绩</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				background
				:page-sizes="pagesizeList"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:page-size="listQuery.page_size"
				:current-page="listQuery.page_number"
				layout="total, sizes, prev, pager, next, jumper"
				:total="listQuery.total"
			></el-pagination>
		</div>

		<h1>查看试卷</h1>
		<h3>(请点击相应考试)</h3>
		<el-table
			:data="tableDataPapers"
			align="center"
			header-align="center"
			style="width: 100%"
			border
			fit
			highlight-current-row
		>
			 <el-table-column
      type="index"
      width="50">
    </el-table-column>
			<el-table-column sortable label="考试名称" prop="examname">
				<template slot-scope="scope">
					<el-tag type="success">{{ scope.row.examname }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="试卷标题" prop="title">
				<template slot-scope="scope">
					<el-tag type="info">{{ scope.row.title }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="考试姓名" prop="username">
				<template slot-scope="scope">
					<el-tag type="warning">{{ scope.row.username }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="考生工号" prop="workno">
				<template slot-scope="scope">
					<el-tag type="warning">{{ scope.row.workno }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="试卷分数" prop="fraction">
				<template slot-scope="scope">
					<el-tag type="danger">{{ scope.row.fraction }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="完成度" prop="finish">
				<template slot-scope="scope">
					<el-tag type="danger">{{ scope.row.finish }}%</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable label="提交时间" prop="submitdate">
				<template slot-scope="scope">
					<el-tag type="danger">{{ scope.row.submitdate }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
				<template slot-scope="scope" >
					<el-button v-if="scope.row.hasview==1" type="primary" size="mini" @click="backViewPaper(scope.$index, scope.row)">回看试卷</el-button>
					<el-button v-else="scope.row.hasview==0" type="primary" size="mini" disabled>试卷失效无法回看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				background
				:page-sizes="pagesizeList"
				@current-change="handleCurrentChangePaper"
				@size-change="handleSizeChangePaper"
				:page-size="listQueryPaper.page_size"
				:current-page="listQueryPaper.page_number"
				layout="total, sizes, prev, pager, next, jumper"
				:total="listQueryPaper.total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { PageCXCJ, GetKSCJ, GetExamPaperInfo,GetBackViewPaper } from '@/api/exam';
export default {
	data() {
		return {
			listQuery: {
				page_size: 20,
				page_number: 1,
				order_column: 1,
				order_dir: 'asc',
				search_value: '',
				select_value: '全部',
				total: 0
			},
			listQueryPaper: {
				page_size: 20,
				page_number: 1,
				order_column: 1,
				order_dir: 'asc',
				search_value: '',
				select_value: '全部',
				total: 0
			},
			tableDataPapers: [],
			listLoading: false,
			tableData: [],
			loginstate: '',
			resData: {},
			allrowdata: [],
			rowdata: [],
			pagesizeList: [10, 20, 30, 50, 100, 500, 1000, 5000, 10000]
		};
	},
	methods: {
		backViewPaper(index, row){
		let ruqdata = {
				workno: row.workno,
				examid: row.examid,
				userpaperid:row.id
			};
			let routeData = this.$router.resolve({
   path: '/backview',
   query: ruqdata,
});
window.open(routeData.href, '_blank');
		},
		viewPaper(index, row) {
				this.listQueryPaper.workno=this.loginstate.workno;
				this.listQueryPaper.examid=row.id;
			GetExamPaperInfo(this.listQueryPaper).then(res => {
				this.tableDataPapers=res.data;
			});
		},
		doSearch() {
			var _this = this;
			if (getToken()) {
				this.loginstate = JSON.parse(getToken());
				PageCXCJ(this.listQuery).then(res => {
					_this.resData = res.data;
					_this.tableData = res.data.list;
					_this.listQuery.total = res.recordsTotal;
				});
			} else {
				this.$message.error('无法获取用户信息请重新登陆!');
			}
		},
		selectrowdata(selection, row) {
			this.rowdata = selection;
		},
		selectalldata(selection) {
			this.allrowdata = selection;
		},
		handleEdit(index, row) {
			this.loginstate = JSON.parse(getToken());
			let ruqdata = {
				workno: this.loginstate.workno,
				examid: row.id
			};
			GetKSCJ(ruqdata).then(res => {
				const h = this.$createElement;
				this.$msgbox({
					title: '成绩如下',
					message: h('p', null, [
						h('p', null, [h('span', null, '最高分: '), h('i', { style: 'color: teal' }, res.data.maxFraction)]),
						h('p', null, [h('span', null, '参考次数: '), h('i', { style: 'color: teal' }, res.data.doExamSize)])
					]),

					showCancelButton: false,
					confirmButtonText: '确定',
					beforeClose: (action, instance, done) => {
						done();
					}
				});
			});
		},
		handleSizeChange(val) {
			this.listQuery.page_size = val;
			this.$options.methods.doSearch.bind(this)();
		},
		handleCurrentChange(val) {
			this.listQuery.page_number = val;
			this.$options.methods.doSearch.bind(this)();
		},
		handleSizeChangePaper(val) {
			this.listQuery.page_size = val;
			this.$options.methods.doSearch.bind(this)();
		},
		handleCurrentChangePaper(val) {
			this.listQuery.page_number = val;
			this.$options.methods.doSearch.bind(this)();
		}
	}
};
</script>

<style>
.el-select .el-input {
	width: 130px;
}
.input-with-select .el-input-group__prepend {
	background-color: #fff;
}
</style>
